<template>
	<view class="">
		<view class="video">
			<video id="myVideo" :src="detail.temporaryUrl"
				@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
		</view>
		<view class="box1">
			<view class="around">
				<img :src="detail.userImage" alt="">
			</view>
			<view class="box1-text">
				昵称：{{detail.nickName}}
			</view>
			<view class="agree">
				<like-button @like-clicked="onLikeClicked" />
			</view>
		</view>
		<view class="describe">
			{{detail.summary}}
		</view>
		<view class="detail">
			<view class="detail-box" style="">
				<img src="../../../static/icon/pages/played.png">
				{{detail.playCount}}
			</view>
			<view class="detail-box">
				<img src="../../../static/icon/pages/liked.png">
				{{detail.thumhup}}
			</view>
			<view class="detail-box">
				{{date(detail.updateDate)}}
			</view>
			<view class="detail-box">
				{{type(detail.type)}}
			</view>
		</view>
		<view class="comment">
			<view class="title">
				评论
			</view>
		</view>
	</view>
</template>

<script>
	import LikeButton from '../../../components/home/LikeButton.vue'
	import {
		getAdvert
	} from '../../../api/HomePage/videoDetail.js'
	export default {
		components: {
			LikeButton
		},
		onLoad(options) {
			console.log(options.id)
			getAdvert(options.id).then(res=>{
				this.detail = res.data
			})
		},
		data() {
			return {
				detail:{}
			}
		},
		methods: {
			onLikeClicked(clicked) {
				// 监听到点击事件，执行相应的操作
				console.log('Like button clicked:', clicked);
			}
		},
		computed:{
			date(){
				return function(res){
					let date = new Date(res)
					return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`
				}
			},
			type(){
				return function(res){
					if(res === 0){
						return '纪录片'
					}else if(res === 1){
						return '日常表演'
					}else if(res === 2){
						return '训练'
					}else{
						return '教学视频'
					}
				}
			}
		}
	}
</script>

<style scoped>
	.video {
		width: 100%;
		height: 400rpx;
		background-color: blue;
	}

	#myVideo{
		height: 100%;
		width: 100%;
	}
	.box1 {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 200rpx;
		/* background-color: pink; */
	}

	.around {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		border: 1rpx solid black;
	}
	.around img{
		height: 100%;
		width: 100%;
		border-radius: 50%;
	}

	.box1-text {
		width: 300rpx;
		height: 140rpx;
		margin-left: -60rpx;
		/* border: 1rpx solid black; */
	}

	.agree {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 140rpx;
		height: 140rpx;
		/* border: 1rpx solid black; */
	}

	.describe {
		border: 1px solid #ccc;
		margin: auto;
		/* 边框样式 */
		padding: 20px;
		/* 内边距 */
		background-color: #f5f5f5;
		/* 背景颜色 */
		font-size: 14px;
		/* 字体大小 */
		color: #333;
		/* 字体颜色 */
		width: 320px;
		/* 宽度 */
		line-height: 1.5;
		/* 行高 */
	}

	.detail {
		display: flex;
		justify-content: space-around;
		height: 100rpx;
		/* border: 1rpx solid black; */
	}

	.detail-box {
		display: flex;
		justify-content: center;
		align-items: center;
		/* border: 1rpx solid black; */
		height: 100%;
	}

	img {
		width: 50rpx;
		height: 50rpx;
		/* border: 1rpx solid black; */
	}

	.comment {
		width: 90%;
		height: 300rpx;
		margin: auto;
		padding: 20rpx;
		background-color: #ccc;
	}

	.title {
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid black;
		font-size: 40rpx;
		font-weight: bold;
	}
</style>